<template>
    <view class="content">
        <view class="nav">
			<view class="name">
				<text>杭州市梦想小镇</text>
			</view>
			<view class="search">
				<input type="text" placeholder="永辉超市优惠商品" >
			</view>
        </view>
        <view class="tupian">
            <image class="tu" src="/static/imgs/assets/02.jpg"></image>
        </view>
        <view class="sort">
            <view class="sort-left">
                <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/super.png"></image>
                <view>超市便利</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/basket.png"></image>
                <view>菜市场</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/fruits.png"></image>
                <view>水果店</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/flower.png"></image>
                <view>鲜花绿植</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/drug.png"></image>
                <view>医药健康</view>
            </view></view>
            <view class="sort-right">
                <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/home.png"></image>
                <view>家居时尚</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/cake.png"></image>
                <view>烘焙蛋糕</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/sign.png"></image>
                <view>签到</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/prestige.png"></image>
                <view>大牌免运</view>
            </view>
            <view class="sortlist">
                <image class="sortimg" src="/static/imgs/assets/red.png"></image>
                <view>红包套餐</view>
            </view></view>
        </view>
      	<view class="shop">
     	<view class="shop-header">
        <view>附近店铺</view>
        <view @click="moreclick">查看更多</view>
      </view>
      <view v-for="item in shops" :key="item.id" @click="shopclick(item._id)">
        <view class="hot">
          <image class="logoimg" :src="`/static/${item.imgUrl}`"></image>
          <view class="shop-info">
            <view class="shop-name">{{item.name}}</view>
            <view class="shop-data">
              月售: {{item.sales}} 起送: {{item.expressLimit}} 基础运费: {{item.expressPrice}}
            </view>
            <view class="shop-slogan" style="color: red;">{{item.slogan}}</view>
          </view>
        </view>
        <view class="separator"></view>
      </view>
    </view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                shops:[]
            }
        },
        onLoad() {
            this.show();
        },
        methods: {
    	  show() {
      		uni.request({
        	url: "http://localhost:3000/hotList",
        		success: (res) => {
          		this.shops = res.data;
        		},
        		fail: (err) => {
          			console.error("数据请求失败", err);
        	}
      	});
    	},
      //点击商铺跳转
	  shopclick(id) {
	  console.log(id)
      uni.navigateTo({
        url:`/pages/detail/detail?id=${id}`,
      });
    },
	    //查看更多
	  moreclick(){
		uni.navigateTo({
        url:'/pages/index/more',
      });
	  } 
  }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
    .content {
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .nav{
        background-color: rgb(68, 159, 233);
        width: 100%;
        height: 180rpx;
    }
    .tupian{
        width: 100%;
        height: 200rpx;

    }
    .tupian image{
        width: 100%;
        height: 100%;
    }
    .sort{
        width: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(to bottom, rgb(105, 160, 233), rgb(243, 244, 245));
        text-align: center;
    }
    .sort-left ,.sort-right{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .sortlist{
        width: 130rpx;
        margin: 12rpx;
    }
    .sortimg{
        width: 90rpx;
        height: 90rpx;
    }
  .name{
		font-size: 20px;
		color:azure;
		margin-left: 30px;
		margin-top: 10px;
	}
	.content .search{
		border: 1px solid aliceblue;
		border-radius: 2ch;
		width: 80%;
		background-color: aliceblue;
		margin-top: 10px;
		margin-left: 30px;
	}
.hot {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15rpx 0;
}
.logoimg {
  width: 120rpx;
  height: 120rpx;
}
.shop {
  width: 100%;
  margin-top: 15rpx;
  background-color: white;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 15rpx;
  font-size: 16px;
}
.shop-info {
  margin-left: 15rpx;
}
.shop-name {
  font-size: 18px;
  margin-bottom: 5rpx;
}
.shop-data {
  font-size: 14px;
  color: #666;
  margin-bottom: 3rpx;
}
.shop-slogan {
  font-size: 14px;
}
.separator {
  width: 90%;
  height: 1rpx;
  background-color: #ccc;
  margin: 0 auto;
}
</style>
